<template>
	<div class="login pos-r text-c">
		<img :src="loginUrl.background" class="background"/>
		<div class="login-con middle pl-20 pr-20">
			<img  :src="loginUrl.logo" class="logo pt-20" height="100" width="100"/>	
			<el-col>
				<router-link to="mobileReset" class="w-100 login-button2 mt-20 pos-r display-b">
					<i class="iconfont icon-shouji Icon-phone pos-a"></i>
					使用手机重置密码
				</router-link>
				<router-link to="emailReset" class="w-100 login-button mt-20 pos-r display-b">
					<i class="iconfont icon-youxiang pos-a Icon-email"></i>
					使用邮箱重置密码
				</router-link>
				<router-link to="/" class="f12 padding-n mt-20 mb-20 color-b display-b">←返回登录页</router-link>
			</el-col>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'forgetMess',  
		data (){
		 	return{
		 		
		 	}
		 },
		created:function(){
			this.$store.dispatch("doLoginURL");
		  },
		computed:{
			loginUrl(){							 	
				return this.$store.getters.getLoginUrl
			},
		},
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		max-width: 1920px;
		margin: 0 auto;
		.background{
			position: fixed;
		    height: 100%;
		    width: 100%;
		    left: 0;
		    top: 0;
		}
	.middle{
		position: absolute;
		top: 128px;
		left: 50%;
		margin-left: -160px;
		}
	.login-con{
		background-color: #fff;
		width: 280px;
		border-radius: 6px;
		box-shadow: 0px 0px 4px 0px rgba(0,0,0,.3);	

		.el-button+.el-button{
			margin-left: 0;
		}
		.Icon-phone{	
			top: 50%;   
    	left: 32px;
    	font-size: 18px;
    	margin-top: -18px;
		}
		.Icon-email{	
		top: 50%;   
    	left: 32px;
    	font-size: 14px;
    	margin-top: -17px;
		}
	}
}
</style>